<template>
  <div id="app">
    <!-- 顶部工具栏 -->
    <div class="header" v-if="isShowToolBar">
      <ToolBar :isAmin="isAmin" :isAuditor="isAuditor"></ToolBar>
    </div>
    <!-- nav标签是页面导航的链接组可以做页面的导航栏 -->
    <!-- tag可以指定router-link的渲染样式 -->
    <!-- <nav>
      <router-link to="/login" tag="button">Login</router-link>&nbsp;
      <router-link :to="{ name: 'userMain' }" tag="button">userMain</router-link
      >&nbsp;
      <router-link :to="{ name: 'generalSearch' }" tag="button"
        >generalSearch</router-link
      >&nbsp;
      <router-link :to="{ name: 'advancedSearch' }" tag="button"
        >advancedSearch</router-link
      >&nbsp;
      <router-link :to="{ name: 'writeBlog' }" tag="button"
        >writeBlog</router-link
      >&nbsp;
      <router-link to="/personalCenter" tag="button">PersonalCenter</router-link
      >&nbsp;
      <router-link :to="{ name: 'accountInformation' }" tag="button"
        >accountInformation</router-link
      >&nbsp;

      <router-link :to="{ name: 'audit' }" tag="button">audit</router-link
      >&nbsp;
      <router-link :to="{ name: 'ExactAudit' }" tag="button"
        >ExactAudit</router-link
      >&nbsp;
      <router-link :to="{ name: 'FindPassword' }" tag="button"
        >FindPassword</router-link
      >&nbsp;
      <router-link :to="{ name: 'blogDetail' }" tag="button"
        >blogDetail</router-link
      >&nbsp; <router-link to="/admin" tag="button">admin</router-link>&nbsp;
    </nav> -->
    <!-- 路由插槽，并配置页面缓存,设置最大缓存数 -->
    <div
      class="container"
      :style="{ marginTop: isShowToolBar ? '10px' : '0px' }"
    >
      <keep-alive include="userMain,generalSearch,advancedSearch" :max="20">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ToolBar from "./components/toolBar.vue";
import crypto from "@/utils/crypto";
@Component({
  components: {
    ToolBar,
  },
})
export default class App extends Vue {
  get isShowToolBar(): boolean {
    return this.$route.path !== "/login" && this.$route.path !== "/FindPassword";
  }
  get isAmin(): boolean {
    return this.$store.state.roleName === "admin";
  }
  get isAuditor(): boolean {
    return this.$store.state.roleName === "auditor";
  }
  // 在页面加载时读取sessionStorage里的状态信息
  created() {
    if (sessionStorage.getItem("store")) {
      // 先将sessionStorage里的数据解密
      let strState = sessionStorage.getItem("store") as string;
      let state = crypto.decryptUserInfo(strState);
      this.$store.replaceState(
        Object.assign({}, this.$store.state, JSON.parse(state))
      );
    }
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      // 将store中的数据加密存储
      let strState = crypto.encryptUserInfo(JSON.stringify(this.$store.state));
      sessionStorage.setItem("store", strState);
    });
    
  }
}
</script>

<style lang="scss" >
@import "@/assets/styles/themes.scss";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  text-align: center;
  background-color: #fafafa;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    // width: 100%;
    // 设置一个最小值保证整个组件能放大正常显示，同时设置width为100vw,保证缩小正常
    min-width: 1400px;
    width: 100vw;
    z-index: 2000;
    position: sticky;
    top: 0px;
  }
  min-width: 100vw;
  min-height: 100vh;
  @include useTheme{
    background-color: getVar("bgColor");
    color: getVar("textColor");
  }
}

nav {
  padding: 20px;
  line-height: 10px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
